<!-- 成员列表 仅基础信息 普通成员观看视角 -->
<template>
    <div class="member-list-wrap" v-loading="loading">
        <template v-if="pageInfo.total">
            <ul class="member-list">
                <li class="user-cell" v-for="item in list" :key="item.id" v-link="getTargetUrl({userId: item.userId})" @click="toUserHome(item.userId)">
                    <div class="cover-wrap">
                        <img class="user-cover" :src="item?.userInfoVO?.icon || item?.userInfoVO?.iconWithDefault" alt="" />
                    </div>
                    <div class="main-wrap">
                        <div class="user-title">
                            <span :class="['normal-user-wrap', {'admin-user-wrap': item.userRole === 'admin' || item.userRole === 'create' }]">
                                <Ellipsis
                                    placement="bottom"
                                    effect="light"
                                    :content="item.userName + ' 老师'"/>
                            </span>

                            <span :class="'user-role-'+ item.userRole" v-if="item.userRole === 'admin' || item.userRole === 'create'">
                                {{ item.userRole === 'create' ? '创建人' : '管理员' }}
                            </span>
                        </div>
                        <div class="user-work-place" v-if="item.schoolName">
                            <Ellipsis
                                placement="bottom"
                                effect="light"
                                :content="item.schoolName"
                            />
                        </div>
                        <div class="user-ss">
                            <Ellipsis
                                v-if="item.stageSubjectName"
                                placement="bottom"
                                effect="light"
                                :content="item.stageSubjectName"
                            />
                            <span v-else>暂无学段学科信息</span>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="page-wrap-right" v-if="pageInfo.total > pageInfo.pageSize">
                <Pagination
                    :current-page="pageInfo.currentPage"
                    :page-size="pageInfo.pageSize"
                    :total="pageInfo.total"
                    layout="prev, pager, next"
                    @size-change="sizeChange"
                    @current-change="currentChange"/>
            </div>
        </template>
        <NoData class="no-data-wrap" v-else info="暂无成员" url="no-member@2x.png" />
    </div>
</template>

<script setup>
import Pagination from '@/components/pagination/pagination.vue';
import NoData from '@/components/no-data.vue';
import Ellipsis from '@/components/ellipsis.vue';
import { handleStageSubject } from '@/lib/biz-tools.js';
import { getTargetUrl } from '@/lib/tools.js';
import { ref, reactive, onMounted, nextTick } from 'vue';

import { useRoute } from 'vue-router';

const route = useRoute();

const props = defineProps({
    keyWord: {
        type: String,
        default: ''
    }
})

// 成员列表数据
const list = ref([]);

// 成员列表加载
const loading = ref(false);

// 成员分页数据
const pageInfo = reactive({
    currentPage: 1,
    pageSize: 15,
    total: 0
});

// 获取成员列表数据
function getList (params) {
    loading.value = true;
    G_transmit('topicTaskUser', {
        queries: {
            pageIndex: pageInfo.currentPage,
            pageSize: pageInfo.pageSize,
            taskId: route.params?.topicId,
            keyword: props.keyWord,
            ...params
        }
    }).then((res) => {
        let rusult = res.data?.rows || [];
        list.value = rusult.map(item => {
            return {
                ...item,
                stageSubjectName: handleStageSubject(item.stageSubjectGradeList || [], '-'),
                schoolName: item.orgName || '',
                userName: item.userName || ''
            }
        })
        pageInfo.total = res.data.total;
    }).catch((_err) => {
        console.log(_err);
    }).finally(() => {
        loading.value = false;
    })
}

// 切换页码
function currentChange(num) {
    pageInfo.currentPage = num;
    getList();
}

// 切换每页条数
function sizeChange(num) {
    pageInfo.pageSize = num;
    getList();
}

// 跳转个人、他人主页
function toUserHome(userId) {
    G_go(getTargetUrl({userId}), true);
}

function refreshData () {
    pageInfo.currentPage = 1;
    nextTick(() => {
        getList();
    })
}

onMounted(() => {
    getList();
})


defineExpose({
    refreshData
})
</script>

<style lang="scss" scope>
.member-list-wrap {
    .member-list {
        display: flex;
        flex-wrap: wrap;
        margin-right: -20px;
    }
    .user-cell {
        width: 373px;
        box-sizing: border-box;
        display: flex;
        border-radius: 4px;
        border: 1px solid #eff0f2;
        padding: 20px 40px 20px 20px;
        position: relative;
        word-break: break-all;
        font-size: 14px;
        color: #222222;
        min-height: 120px;
        margin: 0 20px 20px 0;
        .cover-wrap {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;

            .user-cover {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .main-wrap {
        flex: 1;
        overflow: hidden;
        .user-role-admin,
        .user-role-create { 
            font-size: 10px;
            border-radius: 9px;
            line-height: 18px;
            padding: 0 6px;
            font-weight: 400;
            font-family: MicrosoftYaHei;
            margin-left: 7px;
        }
        .user-role-admin {
            color: #316658;
            background: #E7F5F1;
        }
        .user-role-create {
            color: #715039;
            background: #FBE0E9;
        }
    }

    .user-title {
        // width: 240px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        margin-top: 6px;
        font-size: 14px;
        line-height: 18px;
        display: flex;
        align-items: center;
        font-weight: bold;

        span {
            font-size: 14px;
        }
    }

    .user-work-place {
        margin-top: 6px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }

    .user-ss {
        color: #999999;
        margin-top: 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
    .no-data-wrap {
        margin:  100px auto 0;
    }
    .page-wrap-right {
        display: flex;
        justify-content: flex-end;
    }
    .normal-user-wrap {
        max-width: 240px;
    }
    .admin-user-wrap {
        max-width: 190px;
    }
}
</style>